import 'package:flutter/material.dart';
import 'package:flutter_jd/pages/search/controller.dart';
import 'package:flutter_jd/ui/widgets/body/top_bar.dart';
import 'package:flutter_jd/ui/widgets/kit.dart';
import 'package:get/get_state_manager/get_state_manager.dart';
import 'package:get/route_manager.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';

// 搜索
class SearchPage extends GetView<SearchController> {
  @override
  Widget build(BuildContext context) {
    Get.put(SearchController());
    return Scaffold(
      appBar: TopBar(
        height: 0,
      ),
      body: SafeArea(
        child: Column(
          children: [_buildHeader(), _buildContainer()],
        ),
      ),
    );
  }

  Widget _buildHeader() {
    return Container(
      height: 50.h,
      color: Colors.white,
      padding: EdgeInsets.only(left: 12.w, right: 12.w),
      child: Row(
        children: [
          Expanded(
            child: Container(
              height: 32.h,
              child: TextField(
                cursorHeight: 15.h,
                autofocus: true,
                autocorrect: true,
                style: TextStyle(fontSize: 14.sp),
                textInputAction: TextInputAction.search,
                onSubmitted: (value) {
                  controller.search(value);
                },
                decoration: InputDecoration(
                  contentPadding: EdgeInsets.all(0),
                  fillColor: Color(0x30cccccc),
                  filled: true,
                  prefixIcon: Kit.iconFont(0xe692, Colors.black45, 14.sp),
                  prefixIconConstraints: BoxConstraints(minWidth: 35.w),
                  suffixIcon: Kit.iconFont(0xe614, Colors.black45, 14.sp),
                  enabledBorder: OutlineInputBorder(
                    borderSide: BorderSide(color: Color(0x00FF0000)),
                    borderRadius: BorderRadius.all(Radius.circular(100.r)),
                  ),
                  hintText: '机械键盘',
                  hintStyle: TextStyle(
                    fontSize: 14.r,
                  ),
                  focusedBorder: OutlineInputBorder(
                    borderSide: BorderSide(color: Color(0x00000000)),
                    borderRadius: BorderRadius.all(Radius.circular(100.r)),
                  ),
                ),
              ),
            ),
          ),
          GestureDetector(
            onTap: () {
              Get.back();
            },
            child: Container(
              padding: EdgeInsets.only(left: 12.w),
              child: Text(
                '取消',
                style: TextStyle(
                  fontSize: 14.sp,
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildContainer() {
    return Expanded(
      child: SingleChildScrollView(
          child: GestureDetector(
        onPanDown: (_) {
          // Utils.hideKeyboard(context);
        },
        child: Container(
          width: double.infinity,
          padding: EdgeInsets.fromLTRB(12.w, 5.h, 12.w, 10.h),
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.horizontal(
              right: Radius.circular(12.r),
              left: Radius.circular(12.r),
            ),
          ),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Container(
                margin: EdgeInsets.only(bottom: 10.h),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    Container(
                      child: Text(
                        '搜索历史',
                        style: TextStyle(
                          fontSize: 16.sp,
                          fontWeight: FontWeight.w500,
                        ),
                      ),
                    ),
                    Row(
                      children: [
                        Obx(
                          () => Offstage(
                            offstage: !controller.isDelete.value,
                            child: GestureDetector(
                              onTap: () {
                                controller.clearAll();
                              },
                              child: Text(
                                '全部删除',
                                style: TextStyle(
                                  color: Color(0xFF999999),
                                  fontSize: 12,
                                ),
                              ),
                            ),
                          ),
                        ),
                        Obx(
                          () => Offstage(
                            offstage: controller.isDelete.value,
                            child: GestureDetector(
                              onTap: () {
                                controller.openDelete();
                              },
                              child: Kit.iconFont(
                                0xe8b9,
                                controller.isDelete.value
                                    ? Colors.red
                                    : Colors.black45,
                                18.sp,
                              ),
                            ),
                          ),
                        ),
                        Obx(
                          () => Offstage(
                            offstage: !controller.isDelete.value,
                            child: GestureDetector(
                              onTap: () {
                                controller.openDelete();
                              },
                              child: Container(
                                width: 1,
                                height: 8,
                                color: Color(0xFF999999),
                                margin: EdgeInsets.symmetric(horizontal: 8),
                              ),
                            ),
                          ),
                        ),
                        Obx(
                          () => Offstage(
                            offstage: !controller.isDelete.value,
                            child: GestureDetector(
                              onTap: () {
                                controller.openDelete();
                              },
                              child: Text(
                                '完成',
                                style: TextStyle(
                                  color: Colors.red,
                                  fontSize: 12,
                                ),
                              ),
                            ),
                          ),
                        ),
                      ],
                    ),
                  ],
                ),
              ),
              Obx(
                () => Wrap(
                  children: List.generate(
                    controller.historyList.length,
                    (index) => Container(
                      margin: EdgeInsets.only(bottom: 8.h, right: 8.w),
                      padding: EdgeInsets.symmetric(
                        horizontal: 8.w,
                        vertical: 5.h,
                      ),
                      decoration: BoxDecoration(
                        color: Color(0xFFF5F5F5),
                        borderRadius: BorderRadius.circular(20.r),
                      ),
                      child: Row(
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          Text(
                            controller.historyList[index],
                            style: TextStyle(fontSize: 12.sp),
                          ),
                          GestureDetector(
                            onTap: () {
                              controller.deleteItem(index);
                            },
                            child: Offstage(
                              offstage: !controller.isDelete.value,
                              child: Container(
                                color: Colors.transparent,
                                margin: EdgeInsets.only(left: 3),
                                padding: EdgeInsets.all(3),
                                child: Kit.iconFont(
                                  0xe639,
                                  Color(0xFF999999),
                                  10.sp,
                                ),
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      )),
    );
  }
}
